<template>
  <div class="aside-container">
    <el-menu
      :default-active="activeIndex"
      :collapse="isCollapse"
      class="aside-menu"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
      router
      unique-opened
    >
      <!-- 会员管理 -->
      <el-submenu index="1">
        <template #title>
          <i class="el-icon-user"></i>
          <span>会员管理</span>
        </template>
        <el-menu-item index="/user-list">
          <i class="el-icon-user"></i>
          <span>会员列表</span>
        </el-menu-item>
        <el-menu-item index="/black-list">
          <i class="el-icon-lock"></i>
          <span>黑名单管理</span>
        </el-menu-item>
      </el-submenu>

      <!-- 机票管理 -->
      <el-submenu index="2">
        <template #title>
          <i class="el-icon-truck"></i>
          <span>机票管理</span>
        </template>
        <el-menu-item index="/flight-list">
          <i class="el-icon-s-grid"></i>
          <span>航班列表</span>
        </el-menu-item>
      </el-submenu>

      <!-- 订单管理 -->
      <el-submenu index="3">
        <template #title>
          <i class="el-icon-s-order"></i>
          <span>订单管理</span>
        </template>
        <el-menu-item index="/order-list">
          <i class="el-icon-document"></i>
          <span>订单列表</span>
        </el-menu-item>
      </el-submenu>

    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Aside",
  data() {
    return {
      isCollapse: false,
      activeIndex: this.$route.path
    }
  },
  watch: {
    $route: {
      handler(route) {
        this.activeIndex = route.path
      },
      immediate: true
    }
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
      this.$emit('collapse-changed', this.isCollapse)
    }
  }
}
</script>

<style lang="less" scoped>
.aside-container {
  height: 100vh;
  overflow-y: auto;
  background-color: #304156;
  
  .aside-menu {
    height: 100%;
    border-right: none;
    
    &:not(.el-menu--collapse) {
      width: 210px;
    }
  }
}

.aside-container::-webkit-scrollbar {
  width: 6px;
}

.aside-container::-webkit-scrollbar-thumb {
  background: #41546d;
  border-radius: 3px;
}

.aside-container::-webkit-scrollbar-track {
  background: #304156;
}

// 菜单项样式
.el-menu-item {
  &:hover {
    background-color: #263445 !important;
  }
  
  &.is-active {
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: #409EFF;
    }
  }
}

// 图标样式
.el-menu-item [class^="el-icon-"] {
  margin-right: 10px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}

// 子菜单样式
.el-submenu {
  .el-menu-item {
    min-width: 210px;
    padding-left: 45px !important;
  }
}
</style>